<template>
  <div>
    <van-nav-bar title="选择策略模型" left-text="重置" right-text="确认" @click-left="onCancel"
                 @click-right="onConfirm"/>
    <van-tabs type="card" v-model="period" color="#1989fa">
      <van-tab v-for="item in $types.periodTypes" :key="item.value" :name="item.value" :title="item.text"/>
    </van-tabs>
    <van-checkbox-group v-model="activeIds">
      <van-cell-group>
        <van-cell
          v-for="(item, index) in moduleList" v-show="isVisible(item)"
          clickable
          :key="index"
          :title="item.title"
          @click="onToggle(index)"
        >
          <template #right-icon>
            <van-checkbox :name="index" ref="checkboxes"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
  </div>
</template>

<script>
import {getOptionsTarget} from '@/utils'

export default {
  props: {
    url: String,
    direction: String,
    side: String
  },
  data() {
    return {
      period: 'd',
      moduleList: [],
      activeIds: []
    }
  },
  methods: {
    getOptionsTarget,
    isVisible(item) {
      return item.period === this.period && item.direction === this.direction && item.side === this.side
    },
    load() {
      this.$requests.post(this.url, {
        page: 1,
        limit: 100,
        order_by: 'sequence',
        sort_direction: 1,
        enabled: true
      }).then(resp => {
        this.moduleList = resp.datas
      })
    },
    onToggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    onConfirm() {
      this.$emit('confirm', this.activeIds.map(i => {
        return this.moduleList[i]
      }))
    },
    onCancel() {
      this.activeIds = []
    }
  },
  mounted() {
    this.load()
  }
}
</script>
